<template>
  <view class="app-container">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <text class="app-container__title-tip">忘记密码!</text>
    <view class="app-container__item u-padding-30">
      <view
        class="app-container__item_top u-border u-padding-left-20 u-padding-right-20 u-margin-top-20"
      >
        <u-form class="app-container__form">
          <u-form-item left-icon="phone" prop="name">
            <u-input
              type="number"
              v-model="smsForm.phone"
              placeholder="请输入手机号"
            />
          </u-form-item>
          <u-form-item left-icon="edit-pen" prop="name">
            <u-input
              placeholder="请输入图形验证码"
              v-model="smsForm.imageCode"
              type="number"
            ></u-input>
            <view class="" slot="right">
              <u-image
                width="200rpx"
                height="60rpx"
                :src="imgCodeUrl"
                @click="getImageCode()"
              ></u-image>
            </view>
          </u-form-item>
          <u-form-item left-icon="email" prop="name">
            <u-input
              placeholder="请输入验证码"
              v-model="loginForm.smsCode"
              type="number"
            ></u-input>
            <text
              class="app-container__tip price-text"
              slot="right"
              @click="getCode"
              >{{ codeText }}</text
            >
          </u-form-item>
          <u-form-item left-icon="lock" prop="name">
            <u-input
              type="string"
              v-model="loginForm.newPassword"
              placeholder="请输入新密码(6位数,数字加字母组合)"
            />
          </u-form-item>
          <u-form-item left-icon="lock" prop="name">
            <u-input
              type="string"
              v-model="psd2"
              placeholder="请再次输入密码"
            />
          </u-form-item>
        </u-form>
      </view>

      <view class="u-margin-top-40">
        <u-verification-code
          seconds="60"
          ref="uCode"
          @change="codeChange"
        ></u-verification-code>

        <u-button
          type="primary"
          :custom-style="customStyle"
          class="mt-40"
          @click="submit"
          >确认</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { baseURL } from '@/config.js';
export default {
  data() {
    return {
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
      },
      smsForm: {
        imageCode: null,
        imageCodeId: null,
        phone: null,
        phoneCode: '',
        smsType: 'FORGOT_PASSWORD',
      },
      loginForm: {
        phone: null,
        smsCode: null,
        newPassword: null,
      },
      imgCodeUrl: '',
      psd2: null,

      codeText: '',
    };
  },
  mounted() {
    console.log('code');
    this.getImageCode();
  },
  methods: {
    getImageCode() {
      this.smsForm.imageCodeId = new Date().getTime();
      // this.imgCodeUrl = 'http://118.31.238.190:9092/agent-api/common/getImageCode/' + this.smsForm.imageCodeId;
      this.imgCodeUrl =
        baseURL + '/common/getImageCode/' + this.smsForm.imageCodeId;
    },
    codeChange(text) {
      this.codeText = text;
    },
    getCode() {
      const _self = this;
      if (this.$refs.uCode.canGetCode) {
        if (_self.smsForm.phone === null) {
          this.$zx.msg('手机号不能为空');
          return;
        }
        if (_self.smsForm.imageCode === null) {
          this.$zx.msg('图形验证码不能为空');
          return;
        }

        uni.showLoading({
          title: '正在获取验证码',
          mask: true,
        });
        // setTimeout(() => {
        // 	uni.hideLoading();
        // 	// 这里此提示会被this.start()方法中的提示覆盖
        // 	this.$u.toast('验证码已发送');
        // 	// 通知验证码组件内部开始倒计时
        // 	this.$refs.uCode.start();
        // }, 2000);
        _self.$zx.user_api.sendVerifyCodeSms(_self.smsForm).then((data) => {
          console.log('data=' + data);
          uni.hideLoading();
          this.$refs.uToast.show({
            title: '验证码已发送',
            type: 'success',
          });
          //组件倒计时
          this.$refs.uCode.start();
        });
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },
    submit() {
      const _self = this;
      if (_self.smsForm.phone === null) {
        this.$zx.msg('手机号不能为空');
        return;
      }
      if (_self.smsForm.imageCode === null) {
        this.$zx.msg('图形验证码不能为空');
        return;
      }
      if (_self.loginForm.smsCode === null) {
        this.$zx.msg('验证码不能为空');
        return;
      }
      if (_self.loginForm.newPassword === null) {
        this.$zx.msg('密码不能为空');
        return;
      }
      if (_self.psd2 === null) {
        this.$zx.msg('密码不能为空');
        return;
      }
      _self.loginForm.phone = _self.smsForm.phone;

      this.$zx.user_api.forgetPassword(_self.loginForm).then((data) => {
        console.log('data=' + JSON.stringify(data));
        uni.navigateBack({
          delta: 1,
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 30rpx;
  position: relative;
  background-color: white;

  &__title-tip {
    font-size: 46rpx;
  }

  &__item {
    border: 1px solid #e5e5e5;
    border-radius: 20rpx;
    margin: 100rpx 30rpx;

    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  }

  &__item_top {
    border-radius: 20rpx;
    border: 1px solid #e5e5e5;
  }

  &__form {
  }

  &__codeImage {
    width: 200rpx;
    height: 100rpx;
  }
}

.custom-style {
  background-color: $zx-theme-color;
  height: 88rpx;
  font-size: 34rpx;
  margin-bottom: 100rpx;
}
</style>
